<template>
  <el-dialog
      v-model="dialogVisible"
      title="修改业务模型"
      width="80%"
      :show-close="false"
      :close-on-click-modal="false"
  >
    <div class="layui-form layui-form-pane" style="max-height: 50vh;overflow-y: auto">
      <div class="layui-form-item ">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
          <input type="text" name="bus_title" v-model="form.bus_title" autocomplete="off"
                 placeholder="请输入标题"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label">父包名</label>
        <div class="layui-input-block">
          <input type="text" name="bus_parent_package" v-model="form.bus_parent_package" autocomplete="off" readonly
                 placeholder="生成代码使用(代码包路径和模块名拼接):例如：com.lzy.system"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label">模块名</label>
        <div class="layui-input-block">
          <input type="text" name="bus_name" v-model="form.bus_name" autocomplete="off" readonly
                 placeholder="生成代码使用(代码模块名称和父包名拼接)例如：user"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">业务描述</label>
        <div class="layui-input-block">
          <div id="bus_desc_edit" ref="bus_desc_edit"></div>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
let {ElMessageBox} = ElementPlus;
let {nextTick} = Vue;
module.exports = {
  props: ['edit','update_data'],

  data() {
    return {
      dialogVisible: true,
      form: {
      }
    }
  },
  methods: {
    async save() {
      try {
        let common = layui.common;
        await common.ajax({
          url:apiUrlConfig.businessModel.update,
          data:JSON.stringify(this.form)
        });
        this.dialogVisible = false
        layui.toast.success({title: false, message: '保存成功'})
        // 向父组件发送自定义事件及数据
        this.$emit('update_is_update');
      }catch (result){
        if (result.status == 10001) {
          //字段提示
          let errorMsg = JSON.parse(result.msg);
          for (let key in errorMsg) {
            layer.tips(errorMsg[key], layui.jquery("[name='" + key + "']").parent(), {
              tips: [3, '#f56c6c'], time: 5000, tipsMore: true
            });
          }
        }
      }

    },
    close() {
      this.dialogVisible = false
      // 向父组件发送自定义事件及数据
      this.$emit('update_is_update');
    }
  },
  mounted() {
    let that = this;
    this.form = this.update_data;
    nextTick(() => {
      new this.edit.class({
        element: layui.jquery("#bus_desc_edit")[0],
        placeholder: "填写业务具体的业务描述",
        content: that.form.bus_desc,
        toolbarKeys: ["undo", "redo", "brush", "eraser",
          "|", "heading", "font-family", "font-size",
          "|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji",
          "|", "highlight", "font-color",
          "|", "align", "line-height",
          "|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break",
          "|", "image", "quote", "code-block", "table",
          "|", "printer", "fullscreen"
        ],
        onChange:(aiEditor)=>{
          // 监听到用编辑器内容发生变化了，控制台打印编辑器的 html 内容...
          that.form.bus_desc = aiEditor.getHtml();
        },
        image: {
          allowBase64: false,
          uploadUrl: apiUrlConfig.file.uploadFile,
          uploadHeaders: {
            "authorization": localStorage.getItem("token")
          },
          uploader: (file, uploadUrl, headers, formName) => {
            //监听图片上传之前，此方法可以不用回任何内容，但若返回 false，则终止上传
            const formData = new FormData();
            formData.append("file", file);
            return new Promise((resolve, reject) => {
              fetch(uploadUrl, {
                method: "post",
                headers: {'Accept': 'application/json', ...headers},
                body: formData,
              }).then((resp) => resp.json())
                  .then(json => {
                    resolve(json);
                  }).catch((error) => {
                reject(error);
              })
            });
          },
          uploaderEvent: {
            onUploadBefore: (file, uploadUrl, headers) => {
              //监听图片上传之前，此方法可以不用回任何内容，但若返回 false，则终止上传
            },
            onSuccess: (file, response) => {
              //监听图片上传成功
              //注意：
              // 1、如果此方法返回 false，则图片不会被插入到编辑器
              // 2、可以在这里返回一个新的 json 给编辑器
              if (response.status == 200) {
                let fileUrl = apiUrlConfig.file.getFile + "?token=" + encodeURIComponent(localStorage.getItem("token")) + "&isOnLine=true&fileId=" + response.data.id;
                return {
                  "errorCode": 0,
                  "data": {
                    "src": fileUrl,
                    "alt": response.data.file_name
                  }
                }
              }
            },
            onFailed: (file, response) => {
              let toast = layui.toast;
              toast.error({title: false, message: response.msg})
            },
            onError: (file, error) => {
              let toast = layui.toast;
              toast.error({title: false, message: error})
            },
          }
        }
      })
    });
  }
}
</script>
<style scoped>
</style>